<template>
  <c-dialog
    ref="dialog"
    single
    title="色板审核"
    :data="selData"
    @open="openHandle"
  >
    <c-list ref="form" :model="formData" :rules="formRules" label-width="125px" :column="2">
      <c-list-item label="色板任务号" prop="colorTaskCode">
        <el-input v-model="detail.colorTaskCode" disabled show-word-limit :autosize="{minRows:3}" placeholder="色板任务号" clearable />
      </c-list-item>
      <c-list-item label="色板任务进度" prop="colorSchedule">
        <c-dict-select v-model="detail.colorSchedule" dict-type-code="SWATCHES_PROGRESS" disabled />
      </c-list-item>
      <c-list-item label="门店建设项目号" prop="constCode"><el-input v-model="detail.constCode" disabled show-word-limit :autosize="{minRows:3}" placeholder="门店建设项目号" clearable />
      </c-list-item> <c-list-item label="装修任务号" prop="decorationTaskCode">
        <el-input v-model="detail.decorationTaskCode" disabled show-word-limit :autosize="{minRows:3}" placeholder="装修任务号" clearable />
      </c-list-item> <c-list-item label="门店编码" prop="shopCode">
        <el-input v-model="detail.shopCode" disabled show-word-limit :autosize="{minRows:3}" placeholder="门店编码" clearable />
      </c-list-item> <c-list-item label="SAP编码" prop="bizCode">
        <el-input v-model="detail.bizCode" disabled show-word-limit :autosize="{minRows:3}" placeholder="SPA编码" clearable />
      </c-list-item> <c-list-item label="进场时间" prop="actualApproachTime"><el-date-picker v-model="detail.actualApproachTime" disabled type="date" placeholder="进场时间" />
      </c-list-item>
      <c-list-item label="是否需要新店色板包" prop="isNewShopColor"><el-select v-model="detail.isNewShopColor" disabled clearable filterable>
        <el-option :value="1" label="是" />
        <el-option :value="0" label="否" />
      </el-select>
      </c-list-item>
      <c-list-item label="需求色板类型" prop="colorType">
        <c-dict-select v-model="detail.colorType" multiple dict-type-code="SWATCHES_TYPE" disabled />
      </c-list-item>
      <c-list-item label="需求明细" prop="colorDefiniteDetailed">
        <c-dict-select v-model="detail.colorDefiniteDetailed" multiple dict-type-code="SWATCHES_DETAIL" disabled />
      </c-list-item>
      <c-list-item label="是否需要工法展板" prop="isDisplayBoard">
        <el-select
          v-model="detail.isDisplayBoard"
          disabled
          clearable
          filterable
        >
          <el-option :value="1" label="是" />
          <el-option :value="0" label="否" />
        </el-select>
      </c-list-item>
      <c-list-item label="需求内框尺寸" prop="innerSize">
        <c-dict-select v-model="detail.innerSize" multiple dict-type-code="SWATCHES_SIZE" disabled />
      </c-list-item>
      <c-list-item label="审核结果" prop="auditResult">
        <el-select
          v-model="formData.auditResult"
          clearable
          filterable
        >
          <el-option value="1" label="同意" />
          <el-option value="0" label="不同意" />
        </el-select>
      </c-list-item>
      <c-list-item label="审核备注" prop="auditRemark	">
        <el-input
          v-model="formData.auditRemark"
          type="textarea"
          maxlength="1024"
          show-word-limit
          :autosize="{ minRows: 3 }"
          placeholder="请填写备注说明"
          clearable
        />
      </c-list-item>
      <c-list-item>
        <div class="btn-container">
          <c-button @click="cancelHandle">取消</c-button>
          <c-button key="confirm" type="primary" @click="confirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { postAudit } from '@/api/colorNeed'
export default {
  name: 'AuditDraw',
  components: {},
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        auditResult: '',
        auditRemark: '',
        id: ''
      },
      initForm: {
        colorSchedule: '',
        colorTaskCode: '',
        constCode: '',
        colorType: [],
        decorationTaskCode: '',
        shopCode: '',
        bizCode: '',
        actualApproachTime: '',
        isNewShopColor: '',
        colorDefiniteDetailed: [],
        isDisplayBoard: '',
        innerSize: []

      },
      formRules: {
        auditResult: [
          { required: true, message: '请选择审核结果', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    detail() {
      if (this.selData.length > 0) {
        const data = { ...this.initForm, ...this.selData[0] }
        data.colorType = (this.selData[0].colorType && this.selData[0].colorType.split(',')) || []
        data.colorDefiniteDetailed = (this.selData[0].colorDefiniteDetailed && this.selData[0].colorDefiniteDetailed.split(',')) || []
        data.innerSize = (this.selData[0].innerSize && this.selData[0].innerSize.split(',')) || []
        return data
      } else {
        return this.initForm
      }
    }
  },
  methods: {
    openHandle() { },

    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        const data = {
          auditResult: this.formData.auditResult,
          auditRemark: this.formData.auditRemark,
          id: this.detail.id,
          taskType: 'A' }
        return postAudit(data).then((res) => {
          this.$message.success('审核成功！')
          this.$refs.dialog.visible = false
          this.$emit('on-success')
        })
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    }
  }
}
</script>
